import { Button, Image, Divider } from "@taroify/core";
import { View } from "@tarojs/components";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { Medal, Underway, Star } from "@taroify/icons";
import { getUser, deleteUser } from "@/utils/auth";
import { useEffect, useState } from "react";
import { UserType } from "@/types";
import { logoutApi } from "@/api";

export default () => {
  const [user, setUser] = useState<UserType>();
  useLoad(() => {
    console.log("Page loaded.");
  });
  useDidShow(() => setUser(getUser()));
  function logout() {
    logoutApi(user?.ID).then((res) => {
      console.log(res);
      deleteUser();
      Taro.reLaunch({ url: "/pages/user/login" });
    });
  }
  const articleMenus = [
    {
      id: "1",
      text: "我的文章",
      num: 0,
    },
    {
      id: "2",
      text: "我的回帖",
      num: 0,
    },
    {
      id: "3",
      text: "我的关注",
      num: 10,
    },
  ];
  const commonFun = [
    {
      id: "1",
      text: "我的收藏",
      component: <Star size={30} color="#FD923B" />,
    },
    {
      id: "2",
      text: "浏览历史",
      component: <Underway size={30} color="#4782FE" />,
    },
    {
      id: "3",
      text: "我的等级",
      component: <Medal size={30} color="#9660FD" />,
    },
    {
      id: "4",
      text: "我的收藏",
      component: <Star size={30} color="#46D274" />,
    },
  ];

  const router = (url) => Taro.navigateTo({ url });

  return (
    <View className="p-3 relative text-[#91949C]">
      <View className="absolute z-0 top-0 inset-x-0 opacity-80">
        <Image
          className="w-full min-h-44"
          mode="widthFix"
          src={user?.background}
        />
      </View>
      <View className="w-full absolute top-36 inset-x-0 rounded-t-3xl bg-white">
        <View className=" z-10 flex p-4 justify-between items-center ">
          <View className="flex gap-4 items-center">
            <Image shape="circle" width={160} height={160} src={user?.avatar} />
            <View className="text-xs">
              <View className="text-base mb-1 font-bold  text-black">
                {user?.nickname}
              </View>
              {user?.type == 1000 ? (
                <View>
                  <View>登录IP：{user.client_ip}</View>
                  <View>登录端口：{user.client_port}</View>
                </View>
              ) : (
                <View>
                  <View>邮箱地址：原野君</View>
                  <View>上次登录时间：{user?.login_time}</View>
                </View>
              )}
            </View>
          </View>
          {user?.type != 1000 && (
            <Button
              variant="outlined"
              color="info"
              hairline
              shape="round"
              size="mini"
              className="w-24 text-xs"
              onClick={() => router("/pages/userinfo/userinfo")}
            >
              编辑资料
            </Button>
          )}
        </View>
        <View className="flex justify-around items-center">
          {articleMenus.map((item, i) => (
            <View key={i} className="flex items-center justify-center flex-col">
              <View className="text-xl font-bold">{item.num}</View>
              <View>{item.text}</View>
            </View>
          ))}
        </View>
        <Divider />
        <View className="px-2 flex flex-col gap-4">
          <View className="rounded-2xl p-3 bg-[#F7F7F9]">
            <View className="font-bold">常用功能</View>
            <View className="flex items-center justify-around mt-4">
              {commonFun.map((com, i) => (
                <View
                  key={i}
                  className="flex justify-center items-center flex-col"
                >
                  {com.component}
                  <View className="text-xs mt-1">{com.text}</View>
                </View>
              ))}
            </View>
          </View>
        </View>
        <View className="flex justify-between items-center px-2 mt-6 ">
          <View className="bg-[#F7F7F9] w-32 h-10 rounded flex justify-center items-center">
            联系客服
          </View>
          <View
            onClick={logout}
            className="bg-[#F7F7F9] w-32 h-10 rounded flex justify-center items-center"
          >
            退出登录
          </View>
        </View>
      </View>
    </View>
  );
};
